<!DOCTYPE html>
<html lang="ch">

<head>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?90d9b1016c84f436fc9b4b318f5a0ff9";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <meta name="keywords" content="hzyadmin,hzy,HZY,HZY.AdminRazor,hzyadminspa,HZY.AdminSpa">
    <meta charset="UTF-8">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <!-- 移动设备 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit">
    <!-- 禁止搜索引擎抓取 -->
    <meta name="robots" content="nofollow">
    <!-- 禁止百度SiteAPP转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- Chrome浏览器添加桌面快捷方式（安卓） -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Safari浏览器添加到主屏幕（IOS） -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="">
    <!--[if lt IE 9]>
        <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title>HzyAdminUI</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <!--element-ui-->
    <link href="/libs/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <!--hzy-admin-ui-public-->
    <link href="/styles/hzy-admin-ui.css" rel="stylesheet">
    <!--hzy-admin-ui-tools-->
    <link href="/styles/hzy-admin-ui-tools.css" rel="stylesheet">
    <style>
        body {
            background: #f0f2f5 !important;
        }
    </style>
</head>

<body>

    <div id="app" v-cloak class="p-15">

        <el-alert title="富文本编辑器 WangEditor" type="success">
            <p>
                <a target="_blank" href="https://doc.wangeditor.com/">查看示例</a>
            </p>
        </el-alert>

        <el-row :gutter="15" class="pt-15">
            <el-col :span="12">
                <div id="editor"></div>
            </el-col>
            <el-col :span="12">
                <el-card shadow="never">
                    <div v-html="text"></div>
                </el-card>
            </el-col>
        </el-row>

    </div>

    <!-- jquery-3.2.1.min.js -->
    <script src="/libs/jquery/jquery-3.2.1.min.js"></script>
    <!-- layer -->
    <script src="/libs/layer/layer.js"></script>
    <!--vue-->
    <script src="/libs/vue.js"></script>
    <!--moment-->
    <script src="/libs/moment.min.js"></script>
    <!--element-ui-->
    <script src="/libs/element-ui/lib/index.js"></script>
    <!--axios-->
    <script src="/libs/axios.min.js"></script>
    <!--tools-->
    <script src="/scripts/tools.js"></script>
    <!--httpClient-->
    <script src="/scripts/httpClient.js"></script>
    <!--wangEditor-->
    <script src="/libs/wangEditor.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: function() {
                return {
                    text: '富文本编辑器 test',
                    editor: null
                }
            },
            created() {},
            mounted: function() {
                this.initEditor();
            },
            methods: {
                /**
                 * 初始化 富文本编辑器
                 */
                initEditor: function() {
                    let t = this;
                    let E = window.wangEditor;
                    this.editor = new E('#editor');
                    // 设置编辑区域高度为 500px
                    this.editor.config.height = 400;
                    // 配置 onchange 回调函数
                    this.editor.config.onchange = function(newHtml) {
                        //console.log('change 之后最新的 html', newHtml)
                        t.text = newHtml;
                    };
                    // 配置触发 onchange 的时间频率，默认为 200ms
                    this.editor.config.onchangeTimeout = 300 // 修改为 500ms

                    // 配置 server 接口地址
                    this.editor.config.uploadImgServer = "/Upload/Images";
                    this.editor.config.uploadFileName = "editorFileImages";
                    this.editor.config.uploadImgTimeout = 60 * 1000;

                    //
                    this.editor.config.zIndex = 0;

                    //创建
                    this.editor.create();

                    //设置默认值
                    this.editor.txt.html(this.text) // 重新设置编辑器内容
                },
            },
        });
    </script>

</body>

</html>